<template>
  <div class="photo">
    <div class="cover" @click="preview">
      <img class="img" v-lazy="imgPath" />
      <span v-if="count > 1" class="duration">{{ count }}p</span>
    </div>
    <div class="content">
      <span class="title">{{ title }}</span>
      <!-- <span class="author" v-if="author"><i class="fa fa-up-zhu"></i> {{ author }}</span> -->
      <div class="count">
        <span><i class="fa fa-view"></i>{{ view | formatNumber }}</span>
        <span><i class="fa fa-comment"></i>{{ comment | formatNumber }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { formatNumber } from '@/filters/filters.js'
export default {
  name: 'PhotoItem',
  props: {
    title: {
      type: String
    },
    // 图片路径
    coverPath: {
      type: String
    },
    // 图片缩放尺寸
    coverSize: {
      type: String,
      default: '@352w_352h_1c.png'
    },
    // 阅读数
    view: {
      type: [Number, String]
    },
    // 回复数
    comment: {
      type: [Number, String]
    },
    // 图片数
    count: {
      type: Number
    },
    // 所有参数
    allParams: {
      type: Object
    }
  },
  computed: {
    imgPath () {
      return this.coverPath + this.coverSize
    },
    images () {
      let imgs = []
      if (this.allParams) {
        imgs = this.allParams.pictures.map(pic => pic.img_src)
      }
      return imgs
    }
  },
  filters: {
    formatNumber
  },
  methods: {
    preview () {
      ImagePreview({
        images: this.images,
        closeable: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .photo{
    display: flex;
    padding: 8px 5px;
    .cover{
      @include cover(176, 176);
      width: 88px;
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
      .duration{
        position: absolute;
        right: 4px;
        bottom: 4px;
        color: $color-white;
        font-size: 12px;
        padding: {
          left: 2px;
          right: 2px;
        };
        background-color: rgba(0,0,0,.5);
      }
    }
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 12px;
      color: $color-text-secondary;
    }
    .title{
      color: $color-text-secondary;
      @include max-lines(2);
      word-break: break-all;
      font-size: 13px;
      margin-bottom: 8px;
    }
    .author{
      display: flex;
      align-items: center;
      margin-bottom: 4px;
    }
    .count{
      display: flex;
      align-items: center;
      span:first-child {
        margin-right: 10px;
      }
    }
    .fa{
      margin-right: 5px;
      vertical-align: middle;
    }
  }
</style>
